<template>
  <div class="w">
    <header>
      <van-search
        v-model="value"
        show-action
        placeholder="请输入搜索关键词"
        background="#ff4c4c"
        @search="onSearch"
      >
        <template #action>
          <div @click="onSearch">搜索</div>
        </template>
      </van-search>
    </header>
    <section>
      <div class="one">
        <ul>
          <li>
            <i class="iconfont icon-huoche1"></i>
            <span>添加车辆</span>
          </li>
          <li @click="Jump('/client')">
            <i class="iconfont icon-kehuguanli"></i>
            <span>客户管理</span>
          </li>
          <li>
            <i class="iconfont icon-yichuli"></i>
            <span>商机处理</span>
          </li>
          <li @click=" Jump('/employee')">
            <i class="iconfont icon-jichuguanli"></i>
            <span>员工管理</span>
          </li>
          <li>
            <i class="iconfont icon-shangdian1"></i>
            <span>批车大厅</span>
          </li>
          <li>
            <i class="iconfont icon-shangdian1"></i>
            <span>收车大厅</span>
          </li>
          <li>
            <i class="iconfont icon-tubiao_lianmeng-lianlianmenghemaishequ"></i>
            <span>车商联盟</span>
          </li>
          <li>
            <i class="iconfont icon-zhi"></i>
            <span>车险管理</span>
          </li>
        </ul>
      </div>
      <div class="two">
        <p>今日任务</p>
        <div>
          <div>
            999+
            <span>新商机分配</span>
          </div>
          <div>
            0
            <span>客户跟进</span>
          </div>
          <div>
            0
            <span>新车入库</span>
          </div>
        </div>
      </div>
      <div class="three">
        <p>
          <span>系统公告</span>
          <span>1 / 3</span>
        </p>
        <div>
          简介:必应翻译 (Bing Translator)是微软推出的免费在线翻译服务,既可以翻译文本也可以翻译网页。 它能够支持40多种语言互译,其中包括:中文,英文,法文,俄文、韩语... 谷歌/ 微软 /必应web页面免费 翻译 插件_壹加贰等叁
        </div>
        <a>查看更多</a>
      </div>
      <div class="four">
        <p>
          <span>车源广场</span>
          <i class="iconfont icon-xiangyoujiantou"></i>
        </p>
        <div>
          <p>简介:必应翻译 (Bing Translator)是微软推出的免费在线翻译服务,既可以翻译文本也可以翻译网页。 它能够支持40多种语言互译,其中包括:中文,英文,法文,俄文、韩语... 谷歌/ 微软 /必应web页面免费 翻译 插件_壹加贰等叁</p>
        </div>
        <div>
          <p>简介:必应翻译 (Bing Translator)是微软推出的免费在线翻译服务,既可以翻译文本也可以翻译网页。 它能够支持40多种语言互译,其中包括:中文,英文,法文,俄文、韩语... 谷歌/ 微软 /必应web页面免费 翻译 插件_壹加贰等叁</p>
        </div>
      </div>
    </section>
    <footer>
      <van-tabbar
      v-model="active"
      active-color="#ff4c4c"
      inactive-color="#bebebe"
      route
      >
        <van-tabbar-item replace to="/">
          <span>首页</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-shouye"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>车辆管理</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-icon"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item>
          <span>营销工具</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-yingxiaoshezhi"></i>
          </template>
        </van-tabbar-item>
        <van-tabbar-item replace to="/mine">
          <span>我的</span>
          <template #icon="props">
            <i :src="props" id="ico" class="iconfont icon-wode-wode"></i>
          </template>
        </van-tabbar-item>
      </van-tabbar>
    </footer>
  </div>
</template>

<script>
export default {
  data () {
    return {
      active: 0,
      value: '',
      data: ''
    }
  },
  methods: {
    onSearch () {
      console.log('搜索')
    },
    Jump (url) {
      this.$router.push({ path: url })
    }
  },
  mounted () {
    // 登录信息
    this.data = this.$store.state.data
  }
}
</script>

<style lang="less" scoped>
@import './index.less';
</style>
